<template>
  <a-layout class="layout">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">{{collapsed?'路由':'无线路由器'}}</div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="selectedKeys" :defaultOpenKeys="openKeys">
        <a-menu-item key="/">
          <router-link to="/" tag="div">
            <a-icon type="user" />
            <span>Home</span></router-link>
        </a-menu-item>
        <a-sub-menu key="metaWan">
          <span slot="title"><a-icon type="mail" /><span>Wan</span></span>
          <a-menu-item key="/apnSetting">
            <router-link to="/apnSetting" tag="div">
              <span>APN Profile</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="/netModeSetting">
            <router-link to="/netModeSetting" tag="div">
              <span>Net Mode</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="metaWlan">
          <span slot="title"><a-icon type="appstore" /><span>Wlan</span></span>
          <a-menu-item key="/wlanBasicSetting">
            <router-link to="/wlanBasicSetting" tag="div">
              <span>Basic</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="/wlanMacFilterSetting">
            <router-link to="/wlanMacFilterSetting" tag="div">
              <span>Mac filtering</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="flex j-s" style="background: #fff; padding: 0">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        />
        <div class="svk-flex">
<!--          <div>
            <ul class="status-bar clearfix">
              <li class="nw-type"></li>
              <li class="singal-wrap">
                <span></span>
                <i class="icon roaming hidden"></i>
              </li>
              <li class="wifi-wrap">
                <span></span>
                <div class="count icon hidden"><i id="userNum"></i>
                </div>
              </li>
              <li class="network-wrap">
                <span></span>
              </li>
              <li class="sms-wrap hidden">
                <span></span>
              </li>
              <li class="battery-icon-wrap hidden">
                <span class="battery-icon"></span>
                <div class="bar">
                  <div class="progress"></div>
                </div>
              </li>
            </ul>
          </div>-->
          <div v-if="networkType==1">
          <img src="../assets/images/cpe/netmode4G.png">
          </div>
          <div>
          <img v-bind:src="'./images/cpe/signal_small_'+signalLevel+'.png'">
          </div>
          <div>
          <img src="../assets/images/cpe/data_up.png">
          </div>
          <div>
          <img src="../assets/images/cpe/wifi_on.png">
          </div>

          <a-dropdown style="margin-left: 10px; margin-right: 15px;">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">Admin<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" >
                  <a-icon type="lock" />修改密码
                </a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="logout">
                  <a-icon type="logout" />退出
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

      </a-layout-header>
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>

import {getDeviceState, getMccMnc} from "../network/home"

export default {
  data() {
    return {
      collapsed: false,
      selectedKeys: [],
      openKeys: [],
      networkType: 1,
      signalLevel: 2,
    };
  },
  watch: {
    // //路由切换 会触发
    // $route() {
    //   console.log(this.$route.meta);
    //   document.title = this.$route.meta.title;
    // }
  },
  created() {
    //console.log(this.$route);
    if(this.$route.meta && this.$route.meta.module ) {
      this.openKeys = [this.$route.meta.module];
    }
    this.selectedKeys = [this.$route.path];

    /*this.getMccMnc()*/
    this.getDeviceState()
  },
  methods:  {
    logout() {
      this.$router.push("/login");
    },
    getMccMnc() {
      getMccMnc().then(res => {
        console.log(res)
      })
    },
    getDeviceState() {
      getDeviceState().then(res => {
        console.log(res)
        if(res.result.Signal == 0)
        {
          this.signalLevel = 1
        }
        else if(res.result.Signal > 0  && res.result.Signal < 3)
        {
          this.signalLevel = res.result.Signal
        }
        else
        {
          this.signalLevel = 3
        }
      })
    }
  },
};
</script>

<style>

.layout {
  height: 100vh;
}

.svk-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.layout .trigger:hover {
  color: #1890ff;
}

.layout .logo {
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-family: 楷体;
  font-size: 17px;

  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}


</style>